<template>
	<div class="con-z">
		<!-- <div class="left">
			<ConLeft  :msglist="msglist" ></ConLeft>
		</div> -->
		<div class="right">

			<div class="right-bto">
				
				
				<div class="main">
					<div class="search flex">
						<div class="add-mian" >
							 <el-button type="primary" @click="add">添加</el-button>
						</div>
						<div style="margin-left: 20px;">
							<el-input placeholder="请输入关键词进行搜索" clearable v-model="keywords" class="input-with-select">
							  </el-input>
							  <el-button type="primary" icon="el-icon-search" @click="getlist()"></el-button>
						</div>
					</div>
					
				<el-table :data="tableData" height="550" stripe style="width: 100%" :header-cell-style="{'text-align':'center'}"
						:cell-style="{'text-align':'center'}" border>
						<el-table-column  type="index" width="80"></el-table-column>
						<el-table-column prop="title"  label="标题" min-width="80"></el-table-column>
					<el-table-column prop="createtime" :formatter="formatDate" label="创建时间" min-width="80"></el-table-column>
					<el-table-column label="图片" >
						<template slot-scope="scope" >
							<img :src="imgurl+scope.row.attachment_url" alt="" style="width: 80px;height: 80px;">
						</template>
					</el-table-column>
					<el-table-column label="操作" width="400">
						<template slot-scope="scope" >
							<el-button type="warning" @click="handlelook(scope.row)">修改</el-button>
							<el-button type="danger" @click="handledel(scope.row)">删除</el-button>
						</template>
					</el-table-column>
				</el-table>
				
				</div>
				<div class="block" style="margin-top: 18px;">
					<el-pagination
						@size-change="handleSizeChange"
						@current-change="handleCurrentChange"
						:current-page="page"
						:page-sizes="[10]"
						:page-size="10"
						layout="total, sizes, prev, pager, next, jumper"
						:total="total">
					</el-pagination>
				</div>
			</div>
			
		</div>
		
		<el-dialog :title="form.id?'查看':'添加'" :visible.sync="dialogVisible" width="40%" :before-close="close">
			<span>
				<el-form ref="form"  :model="form" label-width="100px"  :inline="false">
					<div style="display: flex;">
						<el-form-item label="标题" required  >
							 <el-input   v-model="form.title" clearable style="width: 200px;"   ></el-input>
						</el-form-item>
					</div>
					<div style="display: flex; text-align: center;">
						<el-form-item label="展品图"  >
							<el-upload class="avatar-uploader" :action="url+'back/common/upload?'" :show-file-list="false"
								:headers="headers" :on-success="handleAvatarSuccess">
								<el-image
								class="avatar"
								v-if="form.attachment_url"
								   style="width: 100%;height: 175px;"
								   :src="imgurl+form.attachment_url" 
								   :preview-src-list="[imgurl+form.attachment_url]">
								 </el-image>
								<i v-else class="el-icon-plus avatar-uploader-icon"></i>
							</el-upload>
						</el-form-item>
						
					</div>
					<div>
						<el-form-item label="文章内容" required  >
							 <el-input  type="textarea" v-model="form.content" clearable style="width: 500px;" height="150"   ></el-input>
						</el-form-item>
					</div>

				</el-form>
			</span>
			<span slot="footer" class="dialog-footer">
				<el-button @click="close">取 消</el-button>
				<el-button type="primary" @click="submit()">确 定</el-button>
			</span>
		</el-dialog>

	</div>
</template>

<script>
	import setting from '@/config/setting';
	// import TinymceEditor from '@/components/TinymceEditor'
	export default{
		// components:{
		// 	TinymceEditor
		// },
		data(){
			return{
				dialogVisible:false,
				url: process.env.VUE_APP_API_BASE_URL,
				imgurl:process.env.VUE_APP_IMG_BASE_URL,
				headers: {
					token: setting.takeToken()
				},
				page:1,
				pages:1,
				totals:0,
				total:0,
				tableData:[],
				form:{},
				keywords:'',
				bumenlist:[],
				renyuanlist:[],
				dep_id:0,
				selectlist:[],
				dialogVisible1:false,
				canhuirenlist:[],
				arylist:[]
			}
		},
		computed: {
			
		  /**
		   * 初始化编辑器
		   */
		  initEditor() {
		    return {
		      height: 400,
		      file_picker_callback: this.file_picker_callback,
		      skin_url: '/tinymce/skins/ui/oxide',
		      content_css: '/tinymce/skins/content/default/content.css',
		      images_upload_handler: (blobInfo, success, error) => {
		        let file = blobInfo.blob();
		        // 使用axios上传
		        const formData = new FormData();
		        formData.append('file', file, file.name);
		        this.$http.post('/back/common/upload', formData).then(res => {
					console.log('上传图片的res',res)
		          if (res.data.code == 1) {
		            success(res.data.data.fullurl);
		          } else {
		            error(res.data.msg);
		          }
		        }).catch(e => {
		          console.error(e);
		          error(e.message);
		        });
		      }
		    };
		  }
		},
		mounted(){
			this.getlist()
			// this.getbumenlist()
		},
		methods:{
			formatDate(row, column) {
			                let data = row[column.property]
			                if (data == null) {
			                    return null
			                }
			                let dt = new Date(data * 1000)
			                let Month = dt.getMonth() + 1 < 10 ? '0' + (dt.getMonth() + 1) : dt.getMonth() + 1;
			                let Day = dt.getDate() < 10 ? '0' + (dt.getDate()) : dt.getDate();
			                let Hours = dt.getHours() < 10 ? '0' + (dt.getHours()) : dt.getHours();
			                let Minutes = dt.getMinutes() < 10 ? '0' + (dt.getMinutes()) : dt.getMinutes();
			                let Seconds = dt.getSeconds() < 10 ? '0' + (dt.getSeconds()) : dt.getSeconds();
			                return dt.getFullYear() + '-' + Month + '-' + Day + ' ' + Hours + ':' + Minutes + ':' + Seconds
			            },
			// 任务列表
			getlist(){
				this.$http.get('/back/content/list?size=10&page=' + this.page + '&keywords=' + this.keywords ).then(res => {
					this.tableData = res.data.data.data
					this.page = res.data.data.current_page
					this.total = res.data.data.total
				})
			},

			selectChange(e){
				this.dep_id = e
				this.getrenyuanlist()
			},
			handleAvatarSuccess(res) {
				if(res.code == 0){
					this.$message.error(res.msg);
				}
				console.log( res)
				this.$set(this.form, 'attachment_url', res.code.url)
			},
			 handleClose(item) {
				 let ary = []
			        this.arylist.splice(this.arylist.indexOf(item), 1);
					this.arylist.forEach(item => {
						ary.push(item.id)
					})
					this.form.user_ids = ary
					console.log(this.form.user_ids)
					this.$refs.multipleTable.toggleRowSelection(item);
			      },
				  clear(){
				  					  this.arylist.forEach((item) => {
				  						  this.$refs.multipleTable.toggleRowSelection(item);
				  					  })
				  					  this.form.user_ids = []
				  					  this.arylist = []
				  },
			add(){
				this.$set(this,'form',{})
				this.dialogVisible = true
			},
			// 添加图片视频
			submit(){
				
				this.$http.post('/back/content/edit',this.form).then(res => {
					if (res.data.code == 1) {
						this.$message({
							message: res.data.msg,
							type: 'success'
						});
						this.getlist();
						this.dialogVisible=false;
						this.arylist = []
					} else {
						this.$message.error(res.data.msg);
					}
				})
			},
			handlelook(item){
				this.form = item
				this.dialogVisible = true
				
			},
			close(){
				this.pages = 1
				this.totals = 0
				this.form = {}
				this.dialogVisible = false
				this.arylist = []
			},
			handledel(item){
				this.$confirm('此操作将删除该产品所有信息, 是否继续?', '提示', {
				         confirmButtonText: '确定',
				         cancelButtonText: '取消',
				         type: 'warning'
				       }).then(() => {
											this.$http.post('/back/content/del',{
												id:item.id
											}).then(res => {
												if (res.data.code == 1) {
													this.$message({
														message: res.data.msg,
														type: 'success'
													});
													
													this.getlist();
												} else {
													this.$message.error(res.data.msg);
												}
											})
				         
				       }).catch(() => {
				         this.$message({
				           type: 'info',
				           message: '已取消删除'
				         });          
				       });
			},
			handleSelectionChange(val) {
					let ary = []
					this.selectlist = val
					val.forEach(item => {
						this.arylist.push(item)
					})
					
					this.arylist = [...new Set(this.arylist)]
					this.arylist.forEach(item => {
						ary.push(item.id)
					})
					this.form.user_ids = ary
					
			},
			toggleSelection(rows) {
			      if (rows) {
			        rows.forEach(row => {
			          this.$refs.multipleTable.toggleRowSelection(row);
			        });
			      } else {
			        this.$refs.multipleTable.clearSelection();
			      }
			},
			handleSizeChange(val) {
			    console.log(`每页 ${val} 条`);
			},
			 
			handleCurrentChange(val) {
			    console.log(`当前页: ${val}`);
				this.page=val;
				this.getlist();
			},
			handleSizeChanges(val) {
			    console.log(`每页 ${val} 条`);
			},
			handleCurrentChanges(val) {
			    console.log(`当前页: ${val}`);
				this.pages=val;
				this.getrenyuanlist();
				
			},
		}
	}
	
</script>

<style scoped lang="scss">
	.box{
		display: inline-block;
		padding: 5px 10px;
		margin: 10px;
		background-color: #55aaff;
		color:#fff;
		border-radius: 8px;
	}
	.video-avatar{
		width: 500px;
		height:300px;
		display: block;
		// left:30px;
	}
	.avatar-uploader  {
		width: 178px;
		border: 1px dashed #d9d9d9;
		border-radius: 6px;
		cursor: pointer;
		position: relative;
		overflow: hidden;
	}
	
	.avatar-uploader:hover {
		border-color: #409EFF;
	}
	
	.avatar-uploader-icon {
		font-size: 28px;
		color: #8c939d;
		width: 178px;
		height: 178px;
		line-height: 178px;
		text-align: center;
	}
	
	.avatar {
		width: 178px;
		height: 178px;
		display: block;
	}
	.flex{
		display:flex;
	}
	.add-mian{
		margin-bottom: 20px;
	}
	.con-z{
		height:90vh;
		position: relative;
		.left{
			position: absolute;
			left: 0;
			top: 0;
			width: 10%;
			height: 100%;
			background-color: #fff;
			border-right: 1px solid rgba(0,0,0,.1);
		}
		.right{
			width: 100%;
			height: 100%;
			position: absolute;
			right: 0;
			top: 0;
			.right-top{
				witdh:100%;
				background-color: #fff;
				font-weight: 600;
				font-size: 16px;
				padding: 16px 24px;
			}
			.right-bto{
				margin-top: 20px;
				padding: 0 20px ;
				overflow: auto;
				height: 90%;
				.search{
					padding: 24px;
					background-color: #fff;
					border-bottom: 1px solid #e8e8e8;
					.input-with-select{
						width:360px;
					}
					.shaixuan{
						color:#666666;
						.time{
							margin-top: 10px;
							height: 36px;
							line-height: 36px;
							.font{
								margin-right: 10px;
							}
						}
					}
				}
				.paixu{
					background-color: #fff;
					padding: 24px;
					font-size: 13px;
					display:flex;
					justify-content: space-between;
					border-bottom: 1px solid #e8e8e8;
				}
				.main{
					
					background-color: #fff;
					padding: 24px;
					border-bottom: 1px solid #e8e8e8;
					.main-item{
						width:230px;
						height:230px;
						margin: 0 15px;
						.main-btn{
							margin-top: 5px;
							display:flex;
							justify-content: space-between;
							font-size: 20px;
						}
					}
				}
			}
			
		}
	}
	
</style>